<template>
  <!-- <el-card shadow="never">
  <div slot="header" class="tl-center">资产值线性示意图</div>-->
  <div id="line" :style="{width: '100%', height: '400px'}"></div>
  <!-- </el-card> -->
</template>

<script>
import { statisticalByPrice } from '@/api/assetsNew'

export default {
  data() {
    return {
      lineOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['使用部门数量', '资产值']
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '使用部门数量',
            min: 0,
            // max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '资产值',
            min: 0,
            // max: 25,
            interval: 1000000,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '使用部门数量',
            type: 'bar',
            data: []
          },
          {
            name: '资产值',
            type: 'line',
            yAxisIndex: 1,
            data: []
          }
        ]
      }
    }
  },
  created() {
    statisticalByPrice().then(res => {
      let arr = res.data
      let legendData = [],
        seriesData = [],
        price = []
      arr.map(v => {
        legendData.push(v.deptName)
        seriesData.push({ value: v.total, key: v.deptId })
        price.push(v.price)
      })
      var dom = document.getElementById('line')
      var myChart = this.echarts.init(dom, 'light')
      this.lineOption.xAxis[0].data = legendData
      this.lineOption.series[0].data = seriesData
      this.lineOption.series[1].data = price

      myChart.setOption(this.lineOption)

      myChart.on('click', params => {
        // console.log('params', params)
        this.$router.push({
          path: '/assets/assets-info',
          query: { row: JSON.stringify(params.data) }
        })
      })
    })
  }
}
</script>
